<template>
  <div>
    <div class="bg_write clearfix">
      <el-row>
        <el-row>
          <el-col :span="24" class="content_title">
            <el-col :span="12">
              <HeadTitle></HeadTitle>
            </el-col>
          </el-col>
        </el-row>
      </el-row>
      <el-row>
        <el-col :span="24" class="pd_20" style="overflow-x: auto;">
          <div class="tree" v-loading="loading">
            <ul>
              <li>
                <a href="#">
                  <div class="tree_content"  @click="info_list.tid > 0  && $router.push({ path: '/index/page/platoon_detail', query: { id: info_list.tid } })">
                    <div class="tree_content_right">
                      <div class="tree_content_ava">
                        <img :src="$fnc.getImgUrl(info_list.avatar)" alt />
                      </div>
                      <p>
                        用户名：
                        <span>{{ info_list.username }}</span>
                      </p>
                      <p>
                        昵称：
                        <span>{{ info_list.nickname || '---' }}</span>
                      </p>
                      <p>
                        点位：
                        <span>{{ info_list.oid }}</span>
                      </p>
                      <p>
                        层数：
                        <span>{{ info_list.level }}</span>
                      </p>
                      <p>
                        累计收益：
                        <span>{{ $fnc.toFixedZ(info_list.income, 2) }}</span>
                      </p>
                    </div>
                  </div>
                </a>
                <ul v-if="info_list.one && info_list.one.length > 0">
                  <li v-for="(item1, k) in info_list.one" :key="k">
                    <a href="#">
                      <div class="tree_content"
                        @click="$router.push({ path: '/index/page/platoon_detail', query: { id: item1.id } })">
                        <div class="tree_content_right">
                          <div class="tree_content_ava">
                            <img :src="$fnc.getImgUrl(item1.avatar)" alt />
                          </div>
                          <p>
                            用户名：
                            <span>{{ item1.username }}</span>
                          </p>
                          <p>
                            昵称：
                            <span>{{ item1.nickname || '---' }}</span>
                          </p>
                          <p>
                            点位：
                            <span>{{ item1.oid }}</span>
                          </p>
                          <p>
                            层数：
                            <span>{{ item1.level }}</span>
                          </p>
                          <p>
                            累计收益：
                            <span>{{ $fnc.toFixedZ(item1.income, 2) }}</span>
                          </p>
                        </div>
                      </div>
                    </a>
                    <ul v-if="item1.two && item1.two.length > 0">
                      <li v-for="(item2, y) in item1.two" :key="y">
                        <a href="#">
                          <div class="tree_content"
                            @click="$router.push({ path: '/index/page/platoon_detail', query: { id: item2.id } })">
                            <div class="tree_content_right">
                              <div class="tree_content_ava">
                                <img :src="$fnc.getImgUrl(item2.avatar)" alt />
                              </div>
                              <p>
                                用户名：
                                <span>{{ item2.username }}</span>
                              </p>
                              <p>
                                昵称：
                                <span>{{ item2.nickname || '---' }}</span>
                              </p>
                              <p>
                                点位：
                                <span>{{ item2.oid }}</span>
                              </p>
                              <p>
                                层数：
                                <span>{{ item2.level }}</span>
                              </p>
                              <p>
                                累计收益：
                                <span>{{ $fnc.toFixedZ(item2.income, 2) }}</span>
                              </p>
                            </div>
                          </div>
                        </a>
                        <ul v-if="item2.three && item2.three.length > 0">
                          <li v-for="(item3, j) in item2.three" :key="j">
                            <a href="#">
                              <div class="tree_content"
                                @click="$router.push({ path: '/index/page/platoon_detail', query: { id: item3.id } })">
                                <div class="tree_content_right">
                                  <div class="tree_content_ava">
                                    <img :src="$fnc.getImgUrl(item3.avatar)" alt />
                                  </div>
                                  <p>
                                    用户名：
                                    <span>{{ item3.username }}</span>
                                  </p>
                                  <p>
                                    昵称：
                                    <span>{{ item3.nickname || '---' }}</span>
                                  </p>
                                  <p>
                                    点位：
                                    <span>{{ item3.oid }}</span>
                                  </p>
                                  <p>
                                    层数：
                                    <span>{{ item3.level }}</span>
                                  </p>
                                  <p>
                                    累计收益：
                                    <span>{{ $fnc.toFixedZ(item3.income, 2) }}</span>
                                  </p>
                                </div>
                              </div>
                            </a>
                          </li>

                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
export default {
  name: "platoon_detail",
  data() {
    return {
      loading: false,
      info_list: {},
    };
  },
  components: {
    HeadTitle,
  },
  created() {
    this.get_detail();
  },
  methods: {
    get_detail() {
      this.loading = true;
      let params = {};
      if (this.$route.query.id) {
        params.id = this.$route.query.id;
      }
      if (this.$route.query.mid) {
        params.mid = this.$route.query.mid;
      }
      this.$api.getPage
        .get_platoon_detail(params)
        .then((res) => {
          if (res.data.code == 200) {
            this.info_list = res.data.result;
            this.loading = false;
          } else {
            this.$fnc.alertError(res.data.result);
            this.loading = false;
          }
        });
    },
  },
  watch: {
    $route(old, after) {
      this.get_detail();
    },
  },
};
</script>
<style  scoped>
.tree {
  width: 100%;
  height: 90vh;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tree ul {
  padding-top: 20px;
  position: relative;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

.tree li {
  float: left;
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid #ccc;
  width: 50%;
  height: 20px;
}

.tree li::after {
  right: auto;
  left: 50%;
  border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without    
any siblings*/
.tree li:only-child::after,
.tree li:only-child::before {
  display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child {
  padding-top: 0;
}

/*Remove left connector from first child and    
right connector from last child*/
.tree li:first-child::before,
.tree li:last-child::after {
  border: 0 none;
}

/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
  border-right: 1px solid #ccc;
  border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
  border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid #ccc;
  width: 0;
  height: 20px;
}

.tree li a {
  /* border: 1px solid #ccc; */

  /* width: 200px;
  height: 50px; */
  /* width: 200px; */
  height: auto;
  text-decoration: none;
  color: #666;
  font-family: arial, verdana, tahoma;
  font-size: 14px;
  display: inline-block;

  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;

  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,
.tree li a:hover+ul li a {
  background: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}

/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
  border-color: #94a0b4;
}

.tree_content {
  width: 140px;
  height: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.tree_content_ava {
  width: 60px;
}

.tree_content_ava img {
  width: 100%;
  border-radius: 50%;
  border: 2px solid #999999;
}

.tree_content_right {
  width: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 10px;
}

.tree_content_right p {
  font-size: 10px;
  color: #000;
  width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree_content_right p span {
  font-size: 10px;
  color: #666;
}
</style>
